<template>
  <div class="Search">
    <h1>Search</h1>
    <!-- 地图检索框 -->
    <div id="r-result">
      请输入:
      <input
        type="text"
        id="suggestId"
        size="20"
        style="width: 200px"
        placeholder="搜索"
        @keyup.enter="enterSearch($event)"
      />
    </div>
    <!-- 检索下拉 -->
    <div
      id="searchResultPanel"
      style="
        border: 1px solid #c0c0c0;
        width: 200px;
        height: auto;
        display: none;
      "
    ></div>
    <!-- 地图容器元素 -->
    <div id="container"></div>
  </div>
</template>

<script>
import BaiduMap from "@/assets/js/map.js";
export default {
  name: "Search",
  data() {
    return {
      // 地图实例
      map: null,
      // 默认的经纬度
      defaultPoint: {
        // 经度
        lng: 114.316,
        // 纬度
        lat: 30.581,
      },
      // 得到的经纬度
      getPoint: {
        // 经度
        lng: 114.316,
        // 纬度
        lat: 30.581,
      },
    };
  },
  mounted() {
    // 百度地图初始化
    BaiduMap.init().then((BMap) => {
      console.log(BMap);
      console.log("加载成功...");
      // 百度地图初始化
      this.mapInit();
    });
  },
  methods: {
    // 获取dom
    getDomById(id) {
      return document.getElementById(id);
    },
    // 百度地图初始化
    mapInit() {
      let that = this;
      // 创建地图实例
      this.map = new BMap.Map("container", {
        // JSAPI商用授权挂件默认开启，关闭需要修改调用JSAPI的代码
        enableBizAuthLogo: false,
      });
      // 将地图实例赋值为全局变量
      // 创建点坐标
      // Point类描述了一个地理坐标点，其中第一个表示经度，第二个表示纬度。
      let point = new BMap.Point(this.defaultPoint.lng, this.defaultPoint.lat);
      // 初始化地图，设置中心点坐标和地图级别
      this.map.centerAndZoom(point, 12);
      //开启鼠标滚轮缩放
      this.map.enableScrollWheelZoom(true);
      // 定位 默认位于地图左下方
      this.map.addControl(new BMap.GeolocationControl());
      // 创建标注
      let marker = new BMap.Marker(point);
      // 将标注添加到地图中
      this.map.addOverlay(marker);
      // 监听地图点击事件 lng表示经度，lat表示纬度
      this.map.addEventListener("click", (e) => {
        console.log("当前点击的坐标：", e.point.lng + ", " + e.point.lat);
        // 将点击的标注点赋给全局变量
        this.getPoint.lng = e.point.lng;
        this.getPoint.lat = e.point.lat;
        // 清除地图上所有覆盖物;
        this.map.clearOverlays();
        // 创建点坐标
        // Point类描述了一个地理坐标点，其中第一个表示经度，第二个表示纬度。
        let point = new BMap.Point(e.point.lng, e.point.lat);
        // 创建标注
        let mk = new BMap.Marker(point);
        // 将标注添加到地图中
        this.map.addOverlay(mk);
        // 将地图的中心点更改为给定的点。如果该点在当前的地图视图中已经可见，则会以平滑动画的方式移动到中心点位置。可以通过配置强制移动过程不使用动画效果
        this.map.panTo(point);
      });

      // 浏览器定位精度依赖浏览器自身特性，IP定位的精度值为城市级别。
      // 优先调用浏览器H5定位接口，如果失败会调用IP定位
      // 浏览器会弹窗向用户索要授权

      // 浏览器定位
      let geolocation = new BMap.Geolocation();
      geolocation.getCurrentPosition(function (r) {
        if (this.getStatus() == BMAP_STATUS_SUCCESS) {
          // 	清除地图上所有覆盖物
          that.map.clearOverlays();
          // 创建标注
          let mk = new BMap.Marker(r.point);
          // 将标注添加到地图中
          that.map.addOverlay(mk);
          // 将地图的中心点更改为给定的点。如果该点在当前的地图视图中已经可见，则会以平滑动画的方式移动到中心点位置。可以通过配置强制移动过程不使用动画效果
          that.map.panTo(r.point);
          console.log("您的位置：" + r.point.lng + "," + r.point.lat);
        } else {
          console.log("failed" + this.getStatus());
        }
      });

      // 百度地图检索功能
      this.mapSearch();
    },
    // 百度地图检索功能
    mapSearch() {
      //建立一个自动完成的对象
      var ac = new BMap.Autocomplete({
        input: "suggestId",
        location: this.map,
      });
      //鼠标放在下拉列表上的事件
      ac.addEventListener("onhighlight", (e) => {
        var str = "";
        var _value = e.fromitem.value;
        var value = "";
        if (e.fromitem.index > -1) {
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str =
          "FromItem<br />index = " +
          e.fromitem.index +
          "<br />value = " +
          value;

        value = "";
        if (e.toitem.index > -1) {
          _value = e.toitem.value;
          value =
            _value.province +
            _value.city +
            _value.district +
            _value.street +
            _value.business;
        }
        str +=
          "<br />ToItem<br />index = " +
          e.toitem.index +
          "<br />value = " +
          value;
        this.getDomById("searchResultPanel").innerHTML = str;
      });
      var myValue;
      //鼠标点击下拉列表后的事件
      ac.addEventListener("onconfirm", (e) => {
        var _value = e.item.value;
        myValue =
          _value.province +
          _value.city +
          _value.district +
          _value.street +
          _value.business;
        this.getDomById("searchResultPanel").innerHTML =
          "onconfirm<br />index = " +
          e.item.index +
          "<br />myValue = " +
          myValue;

        this.setPlace(myValue);
      });
    },
    // 给检索出来的地方添加标注
    setPlace(myValue) {
      //清除地图上所有覆盖物
      this.map.clearOverlays();
      let myFun = () => {
        var pp = local.getResults().getPoi(0).point; //获取第一个智能搜索的结果
        // 将点击的标注点赋给全局变量
        this.getPoint.lng = pp.lng;
        this.getPoint.lat = pp.lat;
        // 初始化地图，设置中心点坐标和地图级别
        this.map.centerAndZoom(pp, 18);
        // 添加标注
        this.map.addOverlay(new BMap.Marker(pp));
      };
      // 检索
      var local = new BMap.LocalSearch(this.map, {
        // 智能搜索
        onSearchComplete: myFun,
      });
      local.search(myValue);
    },
    // 回车检索
    enterSearch($event) {
      // 清除地图上所有覆盖物
      this.map.clearOverlays();
      // 检索
      var local = new BMap.LocalSearch(this.map, {
        renderOptions: { map: this.map },
      });
      local.search($event.target.value);
    },
  },
};
</script>
<style lang="scss" scoped>
.Search {
  h1 {
    font-size: 20px;
  }
  #container {
    width: 500px;
    height: 500px;
  }
}
</style>
